<template>
    <div class="container">
        <h3>供货管理</h3>
            <el-row style="margin-top:20px;">
                <el-col :span="7">
                    <el-input placeholder="请输入关键词" v-model.trim="searchName" style="width:300px;">
                        <i slot="prefix" class="el-input__icon el-icon-search" ></i>
                        <el-button slot="append" @click="handleSearch">搜索</el-button>
                    </el-input>
                </el-col>
                <el-button type="primary" v-if="im"  style="float:right; margin-right: 10px" @click="tolead">导入数据</el-button>
            </el-row>

            <el-table
                :data="tableData"
                border
                style="margin-top:20px;"
                ref="multipleTable"
                header-cell-class-name="table-header"
            >
                <el-table-column prop="code" sortable label="采购单编号"></el-table-column>
                <el-table-column prop="purchase" sortable label="采购商"></el-table-column>
                <el-table-column prop="num" sortable label="品种数"></el-table-column>
                <el-table-column prop="createTime" sortable label="创建时间"></el-table-column>
                <el-table-column prop="user" sortable label="操作人"></el-table-column>
                <el-table-column prop="state" sortable label="进度">
					<template slot-scope="scope">
					    {{scope.row.state == 0?'待核对':'已核对'}}
					</template>
				</el-table-column>
                <el-table-column sortable label="操作">
					<template slot-scope="scope">
						<el-button
						    type="text"
							v-if="check"
						    @click="handleView(scope.$index, scope.row)"
						>查看</el-button>
						<el-button
						    type="text"
							v-if="ex"

						    @click="handleExport(scope.$index, scope.row)"
						>导出</el-button>
					</template>
				</el-table-column>
            </el-table>
            <el-pagination layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage" :total="total"  @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>

			<el-dialog title="导入数据" customClass="customWidth" :visible.sync="dialogFormVisible" >
			  <el-form :model="form">
				<el-upload
				    class="upload-daoru"
				    ref="upload"
				    :action="action"
				    :on-change="uploadonchange"
				    accept=".xlsx,.xls"
					:limit="1"
				    :show-file-list='true'
				    :auto-upload="false"
				    >
				    <el-button slot="trigger" type="primary" size="small">点击上传</el-button>
				</el-upload>
			    <el-form-item label="采购单编号" style="width:200px;">
			      <el-input v-model.trim="form.code" autocomplete="off"></el-input>
			    </el-form-item>
			    <el-form-item label="采购商" style="width:200px;">
			      <el-input v-model.trim="form.purchase" autocomplete="off"></el-input>
			    </el-form-item>
			  </el-form>
			  <div slot="footer" class="dialog-footer">
			    <el-button @click="dialogFormVisible = false">取 消</el-button>
			    <el-button type="primary"   @click="save">确 定</el-button>
			  </div>
			</el-dialog>
    </div>
</template>

<script>
    import {supply_findByList,supply_save,supply_export} from "@/request/api"
    import {CodeToText} from 'element-china-area-data'
    export default {
        data() {
            return {
				disabled:true,
				dialogFormVisible:false,
                total:0,
                currentPage:1,
                pagesize:10,
                searchName: '',
                tableData: [],
                form: {},
                idx: -1,
                id: -1,
                boxCode:'',
                boxCode1:'',
                del:true,
                added:true,
                edit:true,
                action:'',
				file:'',
				check:false,
				im:false,
				ex:false,

            };
        },
        created(){
           var data = JSON.stringify(this.$store.state.supply)

            var a = "查看"
            var b = "导入数据"
			var c = "导出"
           if(data.indexOf(a) != -1){
               this.check = true
           }else{
               this.check = false
           }
		   if(data.indexOf(b) != -1){
		       this.im = true
		   }else{
		       this.im = false
		   }
		   if(data.indexOf(c) != -1){
		       this.ex = true
		   }else{
		       this.ex = false
		   }
        },
        mounted(){
            this.init()
        },
        methods: {
			save(){
				if(this.disabled){
					this.disabled = false

					let _this = this
					setTimeout(function () {
						_this.disabled = true
					},7000)
					let formData = new FormData();
					formData.append('file', this.file);
					for(var a in this.form){
					    if(this.form[a] == null || this.form[a] == "null"){
					        this.form[a] = ""
					        formData.append(a,'')
					    }else{
					        formData.append(a,this.form[a])
					    }
					}
					supply_save(formData).then((res)=>{
						this.$notify({
						    title: '提示',
						    message: '导入成功',
						    type: 'success'
						});
						this.dialogFormVisible = false
						this.init()
					})
				}else{
					return
				}

			},
			tolead(){
				this.dialogFormVisible = true
			},
			handleView(index,row){
				this.$router.push({
					path:"/supply/check",
					query:row
				})
			},

            handleCurrentChange(val){
                this.currentPage = val
                this.init()
            },
            init(){
               supply_findByList({
                   page:this.currentPage,
                   query:this.searchName
                }).then((res)=>{
                  this.tableData = res.rows;
                  this.total = res.total
                })
            },
            //搜索
            handleSearch(){
                this.currentPage = 1
                this.init()
            },
            //跳转编辑页面
			uploadonchange(file) {
				this.file = file.raw
				this.$notify({
				    title: '提示',
				    message: '上传成功',
				    type: 'success'
				});
			},
			handleExport(index,row){
				window.location.href = "http://" + window.location.host + "/supply/export/" + row.id;
				// window.location.href = "http://192.168.0.144:8022/" + "/supply/export/" + row.id;
			}
        }
    }
</script>

<style scoped lang="less">
	/deep/.el-dialog{
	  display: flex;
	  flex-direction: column;
	  margin:0 !important;
	  position:absolute;
	  top:50%;
	  left:50%;
	  transform:translate(-50%,-50%);
	  max-height:calc(100% - 30px);
	  max-width:calc(100% - 30px);
	  width:25%;
	}
	// .customWidth{
	// 	width:30%;
	// }
/deep/.upload-daoru{
    // background: #eee;
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        // float: right;
        margin-right: 10px
    }
}
.el-table{ margin-top: 20px;}
 .el-pagination{
    text-align: center;
}
.el-pagination{
    text-align: center;
}
.el-col{
    margin-bottom:0;
}
</style>
